<script setup>
import LoginByAccount from '@/pages/Login/components/LoginByAccount.vue'
import LoginByPhone from '@/pages/Login/components/LoginByPhone.vue'
import { login } from '@/service/login.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'

const loading = ref(false)
const loginMethod = ref('loginByAccount')
const rememberPassword = ref(localStorage.getItem('rememberPassword') === 'true')
const loginInByAccount = ref()
const router = useRouter()

// 点击立即登录
async function onTapLoginButton() {
  if (loginMethod.value === 'loginByAccount') {
    try {
      await loginInByAccount.value.validateForm()
    } catch {
      ElNotification.warning({
        message: '请输入正确格式的账号和密码',
      })
      return
    }
    try {
      loading.value = true
      const res = await login(loginInByAccount.value.form.account, loginInByAccount.value.form.password)
      if (res['code'] === 0) {
        ElNotification.error({
          message: res['message'],
        })
        return
      }
      // 成功登录
      // 登录成功
      ElNotification({
        title: '成功',
        message: '登录成功,正在跳转首页！',
        type: 'success',
      })
      localStorage.setItem('Authorization', res.data)
      if (rememberPassword.value) {
        localStorage.setItem('rememberPassword', 'true')
        localStorage.setItem('account', loginInByAccount.value.form.account)
        localStorage.setItem('password', loginInByAccount.value.form.password)
      } else {
        localStorage.removeItem('rememberPassword')
        localStorage.removeItem('account')
        localStorage.removeItem('password')
      }
      await router.push('/')
    } catch {
      ElNotification.warning({
        message: '服务器错误，请稍后重试',
      })
    } finally {
      loading.value = false
    }
  } else {
    ElNotification.warning({
      message: '功能正在开发中',
    })
  }
}
</script>

<template>
  <div class="login">
    <div class="login">
      <div class="login-panel">
        <h2 style="text-align: center; margin-bottom: 15px">辉瑞小程序后台管理平台</h2>
        <el-tabs v-model="loginMethod" stretch type="border-card">
          <el-tab-pane label="账号登录" name="loginByAccount">
            <LoginByAccount ref="loginInByAccount"></LoginByAccount>
          </el-tab-pane>
          <el-tab-pane label="手机登录" name="loginByPhone">
            <login-by-phone></login-by-phone>
          </el-tab-pane>
        </el-tabs>
        <div class="login-panel-options">
          <el-checkbox v-model="rememberPassword" label="记住密码" size="large" />
          <el-link type="primary">忘记密码</el-link>
        </div>
        <el-button type="primary" round @click="onTapLoginButton" :loading="loading">立即登录 </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url('@/assets/background.svg');
  display: flex;
  align-items: center;
  justify-content: center;

  .login-panel {
    width: 333px;

    .login-panel-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .el-button {
      width: 100%;
      height: 35px;
      line-height: 35px;
    }
  }
}
</style>
